<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>HTML5侧滑聊天面板DEMO演示</title>

<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<div class="demo">
		  <svg class="sidebar" viewBox="0 0 300 500">
			<path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
		  </svg>
		  <div class="static">
			<div class="static__text">Pull white sidebar to the right</div>
		  </div>
		  <div class="sidebar-content">
			<div class="contact">
			  <img src="img/1.png" alt="" class="contact__photo" />
			  <span class="contact__name">Ethan Hawke</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/2.png" alt="" class="contact__photo" />
			  <span class="contact__name">Natalie Portman</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/3.png" alt="" class="contact__photo" />
			  <span class="contact__name">Kevin Spacey</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/4.png" alt="" class="contact__photo" />
			  <span class="contact__name">Rosamund Pike</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/5.png" alt="" class="contact__photo" />
			  <span class="contact__name">Robert Redford</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/6.png" alt="" class="contact__photo" />
			  <span class="contact__name">Scarlett Johansson</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/7.png" alt="" class="contact__photo" />
			  <span class="contact__name">Tom Cruise</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/8.png" alt="" class="contact__photo" />
			  <span class="contact__name">Eva Green</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/9.png" alt="" class="contact__photo" />
			  <span class="contact__name">Paul Newman</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/1.png" alt="" class="contact__photo" />
			  <span class="contact__name">Thomas Break</span>
			  <span class="contact__status"></span>
			</div>
			<div class="search">
			  <img src="img/t8TeL1S.png" alt="" class="search__img" />
			  <input type="text" class="search__input" placeholder="Search" />
			</div>
		  </div>
		  <div class="chat">
			<span class="chat__back"></span>
			<span class="chat__status">status</span>
			<div class="chat__person">
			  <span class="chat__online active"></span>
			  <span class="chat__name">Huehue Huehue</span>
			</div>
			<div class="chat__messages">
			  <div class="chat__msgRow">
				<div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message notMine">Wow!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message notMine">Very elastic! Such easings!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message mine">
				  
				</div>
			  </div>
			</div>
			<input type="text" class="chat__input" placeholder="Your message" />
		  </div>
		</div>
	


<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>